<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <header class="mui-bar mui-bar-nav layout-bg">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left l-arrow"></a>
        <h1 class="mui-title">找回密码</h1>
    </header>
    <div class="reg-wrapper layout-gap">
        <form class="auth-data">
            <div class="mui-flex bor-b">
                <div class="cell fixed">
                    <span class="auth-text reg-min">手机号码</span>
                </div>
                <div class="cell">
                    <input class="auth-input" maxlength="11" type="number" name="phone" value="" placeholder="请输入手机号码" />
                </div>
            </div>
            <div class="mui-flex bor-b">
                <div class="cell fixed">
                    <span class="auth-text reg-min">验证码</span>
                </div>
                <div class="cell">
                    <input class="auth-input" type="number" name="salt" value="" placeholder="请输入验证码" />
                </div>
                <div class="cell fixed">
                    <button type="button" class="reg-salt">获取验证码</button>
                </div>
            </div>
            <div class="mui-flex bor-b">
                <div class="cell fixed">
                    <span class="auth-text reg-min">新密码</span>
                </div>
                <div class="cell">
                    <input class="auth-input" type="password" name="password" value="" placeholder="请输入新密码" />
                </div>
            </div>
            <div class="mui-flex bor-b">
                <div class="cell fixed">
                    <span class="auth-text reg-min">确认密码</span>
                </div>
                <div class="cell">
                    <input class="auth-input" type="password" name="confirm_password" value="" placeholder="请输入确认密码" />
                </div>
            </div>
        </form>
    </div>

    <button type="button" class="pay-btn layout-bg find-password-btn">找回密码</button>
</div>

<script>
    $(function() {
        // 验证手机号
        var reg_phone = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
        $('input[name="phone"]').on('keyup', function() {
            var phone_num = $.trim($('input[name="phone"]').val());

            if (reg_phone.test($(this).val())) {
                $('.reg-salt').addClass('reg-salt-check');
            } else {
                $('.reg-salt').removeClass('reg-salt-check');
            }
        });

        // 获取验证码
        $('.reg-salt').on('click', function() {
            var phone_num = $.trim($('input[name="phone"]').val());

            if (phone_num == '') {
                mui.toast('请输入手机号码');
                return;
            }

            if (!reg_phone.test(phone_num)) {
                mui.toast('您输入的手机号格式不对');
                return;
            }

            settime()
        });

        //  短信验证码发送时间
        var countdown = 59;
        var this_input = document.getElementById("phone-mess");

        function settime() {
            if (countdown == '-1') {
                this_input.removeAttribute("disabled");
                this_input.innerHTML = "短信验证码";
                countdown = 59;
            } else {
                this_input.setAttribute("disabled", true);
                this_input.innerHTML = "重新发送(" + countdown + ")";
                countdown--;
                setTimeout(function () {
                    settime()
                }, 1000)
            }
        }

        // 点击找回密码
        $('.find-password-btn').on('click', function() {
            var param = $('.auth-data').serializeObject();

            if ($.trim(param.phone) == '' || $.trim(param.salt) == '' || $.trim(param.password) == '' || $.trim(param.confirm_password) == '') {
                mui.toast('请填写完整');
                return;
            }

            if (!reg_phone.test(param.phone)) {
                mui.toast('您输入的手机号格式不对');
                return;
            }

            if ($.trim(param.password).length < 6 || $.trim(param.password).length > 16) {
                mui.toast('新密码长度应在6~16位之间');
                return;
            }

            if ($.trim(param.confirm_password).length < 6 || $.trim(param.confirm_password).length > 16) {
                mui.toast('确认密码长度应在6~16位之间');
                return;
            }

            if ($.trim(param.password) != $.trim(param.confirm_password)) {
                mui.toast('新密码和确认密码不一致');
                return;
            }
        })
    })
</script>
</body>
</html>